<template>
    <view class="retrievePassword">
        <Navigation title="找回密码" background="#fff" />
        <view class="ph-40 mt-20 bg">
            <u--form labelPosition="left" :model="model" ref="uForm" labelWidth="80" :labelStyle="{ fontSize: 32 }">
                <u-form-item label="+86" prop="name" borderBottom>
                    <u--input v-model="model.name" border="none" placeholder="请输入您的手机号" fontSize="16" type="number"></u--input>
                </u-form-item>
                <u-form-item label="验证码" prop="name" borderBottom>
                    <view class="f ai-c jc-s-b">
                        <u--input v-model="model.name" border="none" placeholder="请输入短信验证码" fontSize="16"></u--input>
                        <view class="w-1 h-40 su"></view>
                        <view class="fs-32 text-color ml-16">发送验证码</view>
                    </view>
                </u-form-item>
                <u-form-item label="新密码" prop="name" borderBottom>
                    <view class="f ai-c jc-s-b">
                        <u--input v-model="model.name" border="none" placeholder="密码至少六位，包含字母数字" fontSize="16" :password="newPassword"></u--input>
                        <view @click="newPassword = !newPassword" class="w-60 f jc-f-e"
                            ><image :src="newPassword ? hide : display" class="w-32 h-32"></image
                        ></view>
                    </view>
                </u-form-item>
                <u-form-item label="确认新密码" prop="name" borderBottom>
                    <view class="f ai-c jc-s-b">
                        <u--input
                            v-model="model.name"
                            border="none"
                            placeholder="密码至少六位，包含字母数字"
                            fontSize="16"
                            :password="confirmPassword"
                        ></u--input>
                        <view @click="confirmPassword = !confirmPassword" class="w-60 f jc-f-e">
                            <image :src="confirmPassword ? hide : display" class="w-32 h-32"></image>
                        </view>
                    </view>
                </u-form-item>
            </u--form>
        </view>
        <view class="w-f ph-40 mt-64"><u-button text="确定" color="#FABB3C" shape="circle" @click="toNext"></u-button> </view>
    </view>
</template>
<script setup lang="ts">
import hide from 'http://cwht.ricecs.cn/app/login/hide.png';
import display from 'http://cwht.ricecs.cn/app/login/display.png';
import { ref } from 'vue';
const model = ref({
    name: '',
});
const newPassword = ref(true);
const confirmPassword = ref(true);
</script>
<style lang="scss" scoped>
.retrievePassword {
    min-height: 100vh;
    background: #f5f5f5;
    ::v-deep .u-button__text {
        font-weight: 500 !important;
        font-size: 32rpx !important;
    }

    ::v-deep .u-button {
        height: 96rpx !important;
    }
    ::v-deep .u-form-item__body {
        padding: 34rpx 0 !important;
    }
    .bg {
        background: #fff;
    }
    .su {
        background: #faf4e9;
    }
}
</style>
